
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>结构检测平台</title>
    <link rel="stylesheet" href="{%static 'bootstrap.min.css'%}">
     <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.min.js"></script>
    <script src="{% static 'bootstrap.min.js' %}"></script>
    <script src="{% static 'popper.min.js' %}"></script>
    <link rel="stylesheet" href='{% static 'css/base.css'%}'>
    <link rel="stylesheet" href="{% static 'css/style.css' %}">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <link href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

    <style>
{#       .测边框>ul>li{#}
{#    height: 70px;#}
{#    line-height: 70px;#}
{#    text-align: left;#}
{#    padding-left: 30px;#}
{#            font-size:20px;#}
{#}
{#        .测边框>ul>li>a{#}
{#            color:white;#}
{#            text-decoration: none;#}
{#        }#}
{#        .测边框 i{#}
{#            float:right;#}
{#            padding-right:20px;#}
{#        }#}
{#        .测边框>ul>li:hover{#}
{#            background-color:orange;#}
{#        }#}
{#        .测边框{#}
{#            background-color:grey;#}
{#        }#}
    </style>
     
</head>
<body>
<header class="p-3 text-bg-dark border-bottom mb-2">
    <div class="container">
      <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
        <a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">
          <svg class="bi me-2" width="40" height="32" role="img" aria-label="启动" _mstaria-label="138918" _mstHash="27"><use xlink:href="#bootstrap"></use></svg>
        </a>

        <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
            <li><a href="#" class="nav-link px-2 text-secondary" _msttexthash="2136498" _msthash="28">首页</a></li>
          <li><a href="#" class="nav-link px-2 text-white" _msttexthash="5209451" _msthash="29">2</a></li>
          <li><a href="#" class="nav-link px-2 text-white" _msttexthash="4236310" _msthash="30">3</a></li>
          <li><a href="#" class="nav-link px-2 text-white" _msttexthash="15431494" _msthash="31">4</a></li>
          <li><a href="#" class="nav-link px-2 text-white" _msttexthash="5448781" _msthash="32">5</a></li>
        </ul>

        <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3" role="search">
          <input type="search" class="form-control form-control-dark text-bg-dark" placeholder="搜索。。。" aria-label="搜索" _mstplaceholder="99723" _msthash="33" _mstaria-label="74607">
        </form>

        <div class="text-end">
          <button type="button" class="btn btn-outline-light me-2" _msttexthash="5298241" _msthash="34">登录</button>
          <button type="button" class="btn btn-warning" _msttexthash="4708184" _msthash="35">注册</button>
        </div>
      </div>
    </div>
 </header>

    <div id="内容">
          <div class="测边框">
              <ul>
                   <li><a href="/blog/index">首页<i>></i></a></li>
                  <li><a href="/blog/powerall">风速情况<i >></i></a></li>
                  <li><a href="/blog/change">应变情况<i>></i></a></li>
                  <li><a href="/blog/fissure">裂缝情况<i >></i></a></li>
                  <li><a href="/blog/move">位移情况<i >></i></a></li>
                  <li><a href="/blog/windpressure">风压情况<i >></i></a></li>
                  <li><a href="/change">人工检查<i >></i></a></li>
                  <li><a href="/change">设备信息<i >></i></a></li>
                  <li><a href="/change">地区<i>></i></a></li>
                 
              </ul>
          </div>
    {% block body %}
        <div class="展示内容">
                  <div class="数据情况">
                      <div class="数据展示">
                          <div>  
                      <div class="text-center">数据展示情况</div>
                                  <table class="table table-striped-columns border-collapse">
                                  <tr>
                                      <th>测点名称</th>
                                      <th>测点变化</th>
                                      <th>测点状态</th>
                                  </tr>
                                      {% for i in changes1.items %}
                                      <tr> 
                                      <th>{{ i.0}}</th>
                                      {% if i.1 > 0.01%}
                                          <th>{{ i.1 }}%
                                          <i class="el-icon-top-right"></i>
                                          </th>
                                          <th>
                                           <img src="{% static 'image/red.png'%}" height="20" width="20" >
                                              </th>
                                      {% elif i.1 < -0.01 %}
                                          
                                          <th>{{i.1}}%
                                          <i class="el-icon-bottom-right"></i>
                                          </th>>
                                          <th>
                                          <img src="{% static 'image/yellow.png'%}" height="20" width="20" >
                                          </th>
                                      {% else %}
                                          <th>{{ 0 }}%
                                          <i class="el-icon-minus"></i>
                                          </th>
                                          <th>
                                          <img src="{% static 'image/green.png'%}" height="20" width="20" >
                                          </th>
                                      {% endif %}
                                      
                                      
                                  </tr>
                                      {% endfor %}
                                  
                              </table>
                              
                          </div>
                          <div></div>
                      </div>
                      
                      
                      <div class="结构展示">
                        
                           
                       
                          <img src="{% static 'image/1.jpg'%}" height="467" width="1071" >
                             
                      </div>
                  
                  </div>
                  <div class="设备情况">
                 <div>
                     <div class="container">
    <div class="row">
      <div class="col-auto">
        <input type="submit" class="form-control" id="datePicker" >
      </div>
      <div class="col-auto">
          <button type="button">确定</button>
      </div>
    </div>
  </div>
 <h1>2024-09-21</h1>
                      <h2>健康评分：94</h2>
                      <h2>健康状态：优</h2>
                      <a href="">详细情况</a>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
  <script>
    flatpickr(document.getElementById('datePicker'), {
    });
  </script>
                     
                 </div>
               
                    
                  <div>
                        <div  >
                            {{ chart_html }}
                        </div>



                  </div>
                  </div>
          </div>
      </div>
    
    
 
    
    
    
    
    
    
    
{% endblock %}



</body>
</html>